<template>
  <div class="vipset">
    <div class="outmain ba_f heighthv pad_20 bor_rad5">
      <div class="mar_t20">
        <el-button type="primary" size="medium" @click="handleEdit">新增权益</el-button>
      </div>
      <div class="tabledata mar_t20">
        <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText" stripe style="width: 100%" @selection-change="setSelectRows">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="sort" label="排序"></el-table-column>
          <el-table-column prop="name" label="权益名称" width="390">
            <template slot-scope="scope">
              <div class>{{scope.row.name}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="icon" label="权益图标">
            <template slot-scope="scope">
              <div class="flex flex-y-top">
                <img class="goodlogo bor_rad5" :src="scope.row.icon" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="启用状态">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.display" active-value="1" inactive-value="2" @change="changeSwitch(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      </div>
    </div>
    <edit ref="edit" @fetchData="fetchData"></edit>
  </div>
</template>
<script>
import Edit from './interestsedit';
import { getConfig, postConfig } from '@/api/setup';
import { rightsList, modifyRights } from '@/api/user';

export default {
  components: { Edit },
  data() {
    return {
      activeName: 'vipset',
      form: {
        title: '',
        brandName: '',
        logo: '',
        xcxName: '',
        notice: '',
        description: '',
        prerogative: '',
        serviceTel: '',
        content: '',
        register: ['USER_FORM_INFO_FLAG_MOBILE'],
        wechatCard: '2'
      },
      list: [],
      listLoading: false,
      selectRows: '',
      elementLoadingText: '正在加载...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      }
    };
  },
  created() {
    if (this.activeName == 'vipset') {
      this.bus.$emit('loading', true);
      this.init();
    }
    this.fetchData();
  },
  methods: {
    async init() {
      const { data } = await getConfig({ ident: 'vipSet' });
      this.form2 = this.form;
      this.form = Object.assign(this.form2, data);
      this.bus.$emit('loading', false);
    },
    getUeditor(content) {
      this.form.content = content;
    },
    enter(i = 0) {
      this.$refs['imgicon' + i].style.display = 'none';
    },
    leave(i = 0) {
      this.$refs['imgicon' + i].style.display = 'inline-block';
    },
    test(i = 0) {
      console.log(this.$refs, i);
      this.$refs['img' + i].dialogVisible = true;
    },
    imgadd1(url) {
      this.form.logo = url.str;
    },
    deleteMultiImage(item, index, type) {
      //typem没传是单图multigraph多图；index上传图片组件排序
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (!type) {
        switch (index) {
          case 1:
            this.form.logo = '';
            break;
        }
      }
    },
    async fetchData() {
      this.listLoading = true;
      const { data, count } = await rightsList({ item: 11, page: this.page.currentPage });
      this.list = data;
      this.page.total = count;
      setTimeout(() => {
        this.listLoading = false;
      }, 100);
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    handleEdit(row) {
      if (row.id) {
        this.$refs['edit'].showEdit(row);
      } else {
        this.$refs['edit'].showEdit();
      }
    },
    handleDelete(row) {
      if (row.id) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await modifyRights({ id: row.id, type: 2 });
          this.$baseMessage(msg, 'success');
          this.fetchData();
        });
      } else {
        if (this.selectRows.length > 0) {
          const id = this.selectRows.map((item) => item.id);
          this.$baseConfirm('你确定要删除选中项吗', null, async () => {
            const { msg } = await modifyRights({ id, type: 2 });
            this.$baseMessage(msg, 'success');
            this.fetchData();
          });
        } else {
          this.$baseMessage('未选中任何行', 'error');
          return false;
        }
      }
    },
    async changeSwitch(row) {
      const { msg } = await modifyRights({ id: row.id, display: row.display, type: 1 });
      this.$baseMessage(msg, 'success');
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.fetchData();
    },
    ljpz() {
      this.$router.push({ path: '/ptmsg' });
    }
  }
};
</script>
